<script setup>

import List from "@/views/components/List.vue";
// import HeaderMenu from "@/views/components/HeaderMenu.vue";

// 假设你有一个方法来处理导航，这里只是示例
function navigateTo(route) {
  // 使用 vue-router 进行导航
  // 例如: router.push(route)
  console.log('Navigating to:', route);
}
</script>

<template>
  <div class="header">
    <div class="header-left">
      <h1>培训与考试系统</h1>
    </div>

    <div class="header-center">
      <el-button type="text" class="nav-button" @click="navigateTo('/')">首页</el-button>
      <el-button type="text" class="nav-button" @click="navigateTo('/questionnaire')">问卷</el-button>
      <el-button type="text" class="nav-button" @click="navigateTo('/training')">培训</el-button>
      <el-button type="text" class="nav-button" @click="navigateTo('/question-bank')">题库</el-button>
      <el-button type="text" class="nav-button" @click="navigateTo('/exam')">考试</el-button>
    </div>

    <div class="header-right">
      <List />
    </div>
  </div>

</template>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70px; /* 与你的 :deep(.el-header) 高度相匹配 */
  background-color: #409eff; /* 或者你想要的背景色 */
  padding: 0 20px; /* 根据需要调整内边距 */
}

.header-left, .header-right {
  display: flex;
  align-items: center;
}

.header-center {
  display: flex;
  align-items: center;
  gap: 10px; /* 按钮之间的间距 */
}

.nav-button {
  color: black; /* 字体颜色为黑色 */
  font-size: 16px; /* 根据需要调整字体大小 */
  padding: 5px 10px; /* 根据需要调整内边距 */
  border-radius: 4px; /* 可选：圆角边框 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
}

.nav-button:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 可选：鼠标悬停时的背景色 */
}

</style>